﻿@using LdCms.EF.DbModels
@using LdCms.Common.Extension
@using LdCms.Common.Utility
@using LdCms.Common.Json
@model V_Community_ThemeReply
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<article class="page-container bg-eee" style="min-height:775px;">
    <div class="cl pd-20 bg-fff" style="min-height:735px;">
        <div class="tabBar cl clearfix">
            <span>基本信息</span>
        </div>
        <div class="pd-15">
            <form action="@Url.Action("Save",new { ThemeID = Model.ThemeID, ReplyID = Model.ReplyID })" class="form form-horizontal" id="form-add" method="post">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>主题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Title" placeholder="" id="fTitle" name="fTitle" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2" id="aa">略缩图：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="file-content">
                            <ul id="filelist" class="filelist" data-QueuedQuantity="0">
                                <li id="picker" class="picker"><img src="~/admin/static/h-ui.admin/images/image.png" width="100" height="100" /></li>
                            </ul>
                            <ul id="uploadSuccessList" alt="" style="display:none;"></ul>
                            <div style="display:none;"><input id="fImgSrc" name="fImgSrc" type="text" value="" /></div>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">内容：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <script type="text/plain" id="fReplyContent" name="fReplyContent" style="width:100%;height:550px;">
                            @(Html.Raw(Utility.ContentDecode(Model.ReplyContent)))
                        </script>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">回复：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <script type="text/plain" id="fReply" name="fReply" style="width:100%;height:550px;">
                        </script>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>点赞：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.UpNum" placeholder="" id="fUpNum" name="fUpNum" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>踩踏：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.DownNum" placeholder="" id="fDownNum" name="fDownNum" />
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">审核：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fState" name="fState" value="1" @(Model.State.ToBool() ? "checked" : "") />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存 </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</article>
@*
    --------------
    页面底部JS脚本
    --------------
*@
@section css{
    <link href="~/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
}
@section scripts{
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="~/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="~/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="~/admin/static/h-ui.admin/js/ldcms.admin.webuploader.js"></script>
    <script type="text/javascript">
        (function ($) {
            $.mainu = {
                init: function () {
                    $('.skin-minimal input').iCheck({
                        checkboxClass: 'icheckbox-blue',
                        radioClass: 'iradio-blue',
                        increaseArea: '20%'
                    });
                    $("#fDescription").Huitextarealength({
                        minlength: 4,
                        maxlength: 200
                    });
                    $.mainu.getNoticeCategory();
                    $.mainu.initImageArray();
                    $.mainu.ueditorInit();                                  //百度在线编辑器
                    $.mainu.ueditorInitReply();
                    $(".webuploader-pick").removeClass("webuploader-pick"); //去除百度上传组件选择按钮底色
                },
                ueditorInit: function () {
                    //var ue = UE.getEditor('fReplyContent');
                    UE.getEditor('fReplyContent', {
                        //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                        toolbars: [[
                            'fullscreen', 'source', '|', 'undo', 'redo', '|',
                            'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', '|', 'forecolor', 'backcolor',
                            'link', '|',
                            'simpleupload', 'insertimage', 'emotion', 'insertcode', 'help'
                        ]],
                        //关闭字数统计
                        wordCount: false,
                        //关闭elementPath
                        elementPathEnabled: false,
                        //默认的编辑区域高度
                        initialFrameHeight: 300
                    });
                },
                ueditorInitReply: function () {
                    //var ue = UE.getEditor('fReply');
                    UE.getEditor('fReply', {
                        //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                        toolbars: [[
                            'fullscreen', 'source', '|', 'undo', 'redo', '|',
                            'bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', '|', 'forecolor', 'backcolor',
                            'link', '|',
                            'simpleupload', 'insertimage', 'emotion',  'insertcode', 'help'
                        ]],
                        //关闭字数统计
                        wordCount: false,
                        //关闭elementPath
                        elementPathEnabled: false,
                        //默认的编辑区域高度
                        initialFrameHeight: 300
                    });
                },
                initImageArray: function () {
                    var imageArray = @Html.Raw(string.IsNullOrEmpty(Model.ImgArray)?"[]": Model.ImgArray);
                    $list = $("#filelist");
                    $successList = $("#uploadSuccessList");
                    $list.attr({ "data-QueuedQuantity": imageArray.length });
                    if (imageArray.length >= 9) {
                        $("#picker").hide();
                    }
                    var $li = "";
                    var $successli = "";
                    for (var i = 0; i < imageArray.length; i++) {
                        if (imageArray[i].length > 0) {
                            var fileName = imageArray[i].replace(/(.*\/)*([^.]+).*/ig, "$2");
                            $li += `
                            <li id="img_${fileName}">
                                <p class="title">' + file.name + '</p>
                                <p class="imgWrap"><img src="${imageArray[i]}" width="100" height="100"/></p>
                                <div class="img-del-base">
                                    <div class="img-del-bj hide"><a href="javasccript:;" data-id="${fileName}">删除</a></div>
                                    <div class="up-result hide">成功</div>
                                </div>
                            </li>
                            `;
                            $successli += `<li id="img_${fileName}">${imageArray[i]}</li>`;
                        }
                    }
                    $list.prepend($li);
                    $successList.append($successli);

                    $list.find(".imgWrap").on("mouseenter", function () {
                        console.log("a1");
                        var $this = $(this).parent("li");
                        $this.find(".img-del-base").find(".img-del-bj").removeClass("hide");
                    });
                    $list.find(".img-del-base .img-del-bj").on("mouseleave", function () {
                        console.log("a2");
                        $(this).addClass("hide");
                    });
                    $list.find(".img-del-bj").find("a").on("click", function () {
                        console.log("a3");
                        var fileId = $(this).attr("data-id");
                        $list.find("#img_" + fileId).remove();;
                        $successList.find("#img_" + fileId).remove();
                        var fileQueuedQuantity = parseInt($list.attr("data-QueuedQuantity")) - 1;
                        $list.attr({ "data-QueuedQuantity": fileQueuedQuantity });
                        if ((fileQueuedQuantity) < 9) {
                            $("#picker").find("div:eq(1)").css({ "width": "100px", "height": "100px" });
                            $("#picker").show();
                        }
                    });
                },
                getNoticeCategory: function () {
                    var id = "@Model.ColumnID";
                    var url = "@Url.Action("column-list-all")";
                    $.ajaxSetup({ cache: false });
                    $.get(url, { state: true }, function (result) {
                        var state = result.state;
                        var message = result.message;
                        var strOption = '<option value="">选择分类</option>';
                        if (state == "success") {
                            var list = result.data;
                            for (var i = 0; i < list.length; i++) {
                                if (id == list[i].id)
                                    strOption += '<option value="' + list[i].id + '" selected>' + list[i].name + '</option>';
                                else
                                    strOption += '<option value="' + list[i].id + '">' + list[i].name + '</option>';
                            }
                        }
                        $("#fColumnId").html(strOption);
                    });
                },
                formSubmit: function () {
                    $("#form-add").validate({
                        rules: {
                            fTitle: {
                                required: true,
                                minlength: 2,
                                maxlength: 200
                            },
                            fColumnId: {
                                required: true
                            },
                            fContent: {
                                required: true
                            }
                        },
                        onkeyup: false,
                        focusCleanup: true,
                        success: "valid",
                        submitHandler: function (form) {
                            var fColumnName = $("select[name='fColumnId']").find("option:selected").text();
                            var fIsWonderful = $("input[name='fIsWonderful']").is(':checked');
                            var fIsTop = $("input[name='fIsTop']").is(':checked');
                            var fState = $("input[name='fState']").is(':checked');
                            var fImgArray = [];
                            $("#uploadSuccessList li").each(function () {
                                fImgArray.push($(this).text());
                            });
                            $(form).ajaxSubmit({
                                type: "POST",
                                cache: false,
                                data: {
                                    fColumnName: fColumnName,
                                    fIsWonderful: fIsWonderful,
                                    fIsTop: fIsTop,
                                    fState: fState,
                                    fImgArray: fImgArray
                                },
                                dataType: "json",
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    if (XMLHttpRequest.status != 200) {
                                        layer.alert("POST[FAIL]", { icon: 5 });
                                    }
                                },
                                success: function (result) {
                                    var state = result.state;          //错误代码
                                    var message = result.message;        //错误说明
                                    if (state == "success") {
                                        layer.msg(message, { icon: 1, time: 2000 });
                                    } else {
                                        layer.msg(message, { icon: 1, time: 2000 });
                                    }
                                }
                            });
                        }
                    });
                }
            };
            $(function () {
                $.mainu.init();
                $.mainu.formSubmit();
            });
        })(jQuery);
    </script>
}

